<template>
  <div id="app">
    <router-view></router-view>
    <ImageDialog ref="ImageDialogRef" :max="maxChooseImage" />
  </div>
</template>

<script>
import ImageDialog from "@/components/image/image-dialog.vue"

export default {
  name: "app",
  components: {
    ImageDialog
  },
  // 依赖注入
  provide() {
    return {
      app: this
    }
  },
  data() {
    return {
      maxChooseImage: 9
    };
  },
  created() {
    // 初始化用户信息
    this.$store.commit("initUser");
    // 初始化后台菜单
    this.$store.commit("initNavBar");
  },
  methods: {
    show(callback, max = 9) {
      this.maxChooseImage = max;
      this.$refs.ImageDialogRef.show(callback);
    }
  }
};
</script>

<style>
/* 修改浏览器滚动条的样式 */
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.25);
  transition: color 0.2s ease;
}
</style>
